<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang="ts">
import { onMounted, onUnmounted, useTemplateRef, reactive } from 'vue'
import * as THREE from 'three'
import Stats from "three/examples/jsm/libs/stats.module.js";
import { initScene } from './utils/scene';
import { initCamera } from './utils/camera';
import { initGround } from './utils/ground';
import { initRenderer } from './utils/renderer';
import { initControls } from './utils/controls';
import { initLights } from './utils/lights';
import { loadGO2Model } from './utils/go2';
import { createClock } from './utils/clock';

// 场景元素声明
const container = useTemplateRef("container")
const stats = reactive(new Stats())
let scene: THREE.Scene
let camera: THREE.PerspectiveCamera
let renderer: THREE.WebGLRenderer
let cleanGO2: () => void;

let controls;
let ground: THREE.Mesh
let animationFrameId: number
// eslint-disable-next-line @typescript-eslint/no-unused-vars
let clock: THREE.Clock

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const mixers = [], objects = [];

// 动画循环
const animate = () => {

  // const delta = clock.getDelta()

  renderer.render(scene, camera)
  stats.update()
  animationFrameId = requestAnimationFrame(animate)
}

// 处理窗口大小变化
const handleResize = () => {
  if (!camera || !renderer) return

  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
}

// 组件挂载时初始化
onMounted(() => {
  if (!container.value) {
    console.error("dom not found");
    return
  }
  clock = createClock()

  // 初始化场景
  scene = initScene()
  scene.background = new THREE.Color(0xa0a0a0);
  scene.fog = new THREE.Fog(0xa0a0a0, 10, 50);

  camera = initCamera()

  camera.position.set(7.3, -6, 5);

  camera.rotation.x = 64
  camera.rotation.y = 0
  camera.rotation.z = 47

  camera.lookAt(0, 0, 0)
  camera.updateMatrix()

  renderer = initRenderer()
  animate()
  // 多光源
  const lights = initLights()
  lights.forEach(light => {
    scene.add(light)
  })


  container.value?.appendChild(renderer.domElement)
  document.body.appendChild(stats.dom)

  if (!renderer || !camera) {
    console.error('Renderer or camera not initialized')
    return
  }
  window.addEventListener('resize', handleResize)

  controls = initControls(camera, renderer)
  controls.update();

  ground = initGround()
  scene.add(ground)

  cleanGO2 = loadGO2Model(scene, camera, renderer);


  camera.position.set(0, 4, -5);
  camera.lookAt(0, 0, 0)

})

// 组件卸载时清理
onUnmounted(() => {
  cancelAnimationFrame(animationFrameId)
  window.removeEventListener('resize', handleResize)
  if (camera) camera.clear()

  if (cleanGO2) cleanGO2()

  if (renderer) {
    renderer.dispose()
    container.value?.removeChild(renderer.domElement)
  }
})
</script>

<template>
  <div ref="container" class="scene-container">
  </div>
</template>


<style scoped lang="scss">
.scene-container {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
